<template>
  <view class="package">
    <view class="space-between">
      <view>数据概况</view>
      <view class="data space-between">
        <view v-for="(item,index) in list" :key="index" :class="active===index?'active':''" @click="()=>active=index">
          {{item.name}}
        </view>
      </view>
    </view>
    <view class="center lis">
      <view class="column">
        <view>加注量(公斤)</view>
        <view>10.23</view>
      </view>
      <view class="column">
        <view>触达数(人)</view>
        <view>10.23</view>
      </view>
      <view class="column">
        <view>时长(h)</view>
        <view>10.23</view>
      </view>
      <view class="column">
        <view>订单收益(元)</view>
        <view>10.23</view>
      </view>
      <view class="column">
        <view>奖金收益(元)</view>
        <view>10.23</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const active = ref(0)
  const list = [{ name: '今日' }, { name: '本周' }, { name: '本月' }, { name: '全部' }]
</script>

<style scoped lang="less">
  .data {
    width: 400rpx;
    height: 52rpx;
    border: 1px solid #1D8DFF;
    box-sizing: border-box;
    border-radius: 26rpx;

    view {
      width: 25%;
      text-align: center;
      font-size: 24rpx;
      color: #666666;
      height: 52rpx;
      line-height: 52rpx;
    }

    .active {
      background-color: #1D8DFF;
      color: #fff;
      border-radius: 26rpx;
    }
  }

  .lis {
    flex-wrap: wrap;

    .column:nth-child(3n) {
      margin-right: 0px;
    }

    .column {
      width: 22%;
      margin-top: 20rpx;
      margin: 20rpx 17% 0px 0px;
      view:nth-of-type(1) {
        font-size: 24rpx;
        color: #666666;
        margin-bottom: 10rpx;
      }
    }
  }
</style>